<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import APlayer from "aplayer";
import "APlayer/dist/APlayer.min.css";

export default defineComponent({
  name: "APlayer",
  setup() {
    const player = ref(null);

    onMounted(() => {
      player.value = new APlayer({
        container: document.getElementById("aplayer"),
        mini: false,
        autoplay: false,
        theme: "#FADFA3",
        loop: "all",
        order: "random",
        preload: "auto",
        volume: 0.7,
        mutex: true,
        listFolded: false,
        listMaxHeight: 100,
        lrcType: 3,
        showlrc: true,
        audio: [
          {
            name: "Song Name",
            artist: "Artist",
            url: "http://music-pc.oss-cn-beijing.aliyuncs.com/Mp3/%E5%85%89%E3%82%8B%E3%81%AA%E3%82%89%20.mp3",
            cover: "http://blog-imges-v1.oss-cn-beijing.aliyuncs.com/blog/images/navbgc.jpg",
            lrc: "http://music-pc.oss-cn-beijing.aliyuncs.com/Lyric/lrc1.lrc",
          },
          {
            name: "Song Name",
            artist: "Artist",
            url: "https://music.163.com/song/media/outer/url?id=1369798757.mp3",
            cover: "http://blog-imges-v1.oss-cn-beijing.aliyuncs.com/blog/images/imgtop.jpg",
            // lrc: "http://music-pc.oss-cn-beijing.aliyuncs.com/Lyric/%E5%85%89%E3%82%8B%E3%81%AA%E3%82%89%20.lrc",

          },
        ],

      });
    });

    return {
      player,
    };
  },
});
</script>

<template>
  <div class="aplayer-container">
    <div id="aplayer" />
  </div>
</template>

<style scoped>
.aplayer-container {
  width: 100%;
  height: 100%;
}

#aplayer {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  box-shadow: 0 0 0 !important;
}

.aplayer {
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;

}
</style>
